<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜单详情</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <h3 class="big-tit">菜谱详情</h3>
    <div class="container flex-box">
      <div class="left">
        <img
          src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
          alt=""
        />
      </div>
      <div class="right">
        <h3>菜谱名称</h3>
        <p>
          菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息
        </p>
        <h5>下面列表是菜谱中美味的菜品哦！</h5>
      </div>
    </div>
    <ul class="list-box">
      <li>
        <a href="detail.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
    </ul>
    <script src="/lib/jquery.js"></script>
    <script>
      $(function () {
        let id = localStorage.getItem("token-id");
        const q = {
          pageNum: 1,
          pageSize: 35,
          name: "",
        };

        $.ajax({
          method: "get",
          url: "http://124.223.14.236:3001/api/recipe",
          data:q,
          success: function (res) {
            console.log(res);
            const num = [];
            $.each(res.data.list, function (i, item) {
              num.push(`
              <li data-id="${item.id}" class="dianji">
            <a href="detail.html">
          <img src="http://124.223.14.236:3001/public/${item.img}" alt="" />
          <h3>${item.name}</h3>
           </a>
          </li>
              `);
            });
            $(".list-box").empty().append(num.join(""));
          },
        });

        $(".list-box").on("click", "li", function () {
          let num = $(this).attr("data-id");
          localStorage.setItem("token-idd", num);
        });

          //  window.parent.fn()

        $.ajax({
          method: "get",
          url: `http://124.223.14.236:3001/api/recipe/${id}`,
          success: function (res) {
            console.log(res);
            const objhtml = `
            <div class="left">
          <img src="http://124.223.14.236:3001/public/${res.data.img}" alt="" />
          </div>
         <div class="right">
         <h3>${res.data.name}</h3>
         <p>
          ${res.data.description}
          </p>
         <h5>下面列表是菜谱中美味的菜品哦！</h5>
         </div>
         `;
            $(".container").html(objhtml);
          },
        });
      });
    </script>
  </body>
</html>
